<template>
    <div class="logo">

    </div>
    <el-menu class="cloud-el-menu" @open="handleOpen" @close="handleClose" router>
        <template v-for="(item, i) in routers">
            <!-- 有二级菜单，且二级菜单的个数大于 1 -->
            <!-- 有多个（大于 1）二级菜单时，index 无意义，只要唯一就行 -->
            <el-sub-menu :index="i + ''" :key="i" v-if="childrenLength(item.children) > 1 && item.meta?.hide !== true">
              <template #title>
                <el-icon v-if="item.meta?.icon">
                  <component :is="item.meta?.icon"/>
                </el-icon>
                <span>{{item.name}}</span>
              </template>
              <el-menu-item v-for="children in item.children" :key="children.path" :index="children.path" @click="menuItem">{{children.name}}</el-menu-item>
            </el-sub-menu>

            <!-- 无二级菜单，或二级菜单的个数小于等于 1 -->
            <el-menu-item :index="menuItemPath(item)" :key="menuItemPath(item)" v-if="childrenLength(item.children) <= 1 && item.meta?.hide !== true" @click="menuItem">
              <el-tooltip class="box-item" effect="dark" :disabled="!isCollapse" content="item.name" placement="right">
                <el-icon v-if="item.meta?.icon">
                  <component :is="item.meta?.icon"/>
                </el-icon>
              </el-tooltip>
              <span>{{item.name}}</span>
            </el-menu-item>

        </template>
    </el-menu>
</template>

<script>
import { onMounted, reactive, ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

import manageRouter from '@/router/managerRouter'

export default {
    name: 'AppMenu',
    setup () {
        const routers = reactive(manageRouter)
        onMounted(() => {
            console.log(manageRouter)
        })
        const isCollapse = ref(false)
        const handleOpen = (key, keyPath) => {
            console.log(key, keyPath)
        }
        const handleClose = (key, keyPath) => {
            console.log(key, keyPath)
        }
        const childrenLength = (children) => {
            debugger
            if (children == null) {
                return 0
            } else {
                return children.length
            }
        }

        const menuItemPath = (item) => {
            if (item.children == null) {
                return item.path
            } else {
                return item.children[0].path
            }
        }

        return {routers, isCollapse, handleOpen, handleClose, childrenLength, menuItemPath}
    }
}
</script>

<style lang="scss" scoped>

</style>